<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脚标机实时监控系统</title>
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- layui日期插件样式 -->
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style_dark.css" rel="stylesheet" type="text/css" />

    <!-- datatables插件 -->
    <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
    <script src="assets/js/modernizr.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgba(152, 166, 173, 0.2);
            color: #7c8e9a;
            /* color: #313541; */
            height: 100%;
        }

        #showBarcodeMachine {
            float: left;
            width: 100%;
            height: 100%;
            /* background-color: #212529; */
            color: #212529;
            font-size: 17px;
            padding-left: 15px;
            padding-right: 15px;
            margin: 0 auto;

        }

        #showBarcodeMachine div {
            display: inline-block;
            text-align: left;
            margin: 4% 1% 4% 2%;
            background-color: #313541;
            line-height: 10%;
        }

        ul {
            list-style: none;
        }

        /* #machineNum {
            height: 380px;
            overflow-y: auto;
        } */

        /* #machineNum::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        #machineNum::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(36, 34, 34, 0.609);
            background: rgba(158, 165, 171, 0.466);
        }

        #machineNum::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(59, 56, 56, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);

        }

        #machineNum::-webkit-scrollbar-corner {
            background-color: #313541;
        } */

        #main {
            width: 400px;
            /* height: 600px; */
            margin: 0 auto;
            float: center;
        }
    </style>
</head>

<body>
    <!-- Begin page -->
    <div id="page">

        <!-- ========== 左边侧边栏代码 ========== -->
        <div class="left side-menu">

            <div class="slimscroll-menu" id="remove-scroll">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a class="logo">
                        <span>
                            <img src="assets/images/logo.png" alt="" height="22">
                        </span>
                        <i>
                            <img src="assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- 用户区域 -->
                <div class="user-box">
                    <!-- <div class="user-img">
                <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
                </div>
               <h5><a href="#">超级管理员</a> </h5>
               <p class="text-muted">超管</p> -->
                </div>

                <!--- 侧边菜单 -->
                <div id="sidebar-menu">
                    <ul class="metismenu" id="side-menu">
                        <li style="overflow-y: auto !important;">
                            <a href="javascript: void(0);"><i class="fa fa-wpforms"></i> <span id="slaughterHouseName">
                                </span> <span class="menu-arrow"></span></a>
                            <ul class="nav-second-level" aria-expanded="false" id="machineNum">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- ============================================================== -->
        <!-- 页面内容开始 -->
        <!-- ============================================================== -->

        <div class="content-page">

            <!-- 头部横条 -->
            <div class="topbar">

                <nav class="navbar-custom">

                    <ul class="list-unstyled topbar-right-menu float-right mb-0">

                        <li class="dropdown notification-list tabUser">
                            <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
                                aria-haspopup="false" aria-expanded="false">
                                <span class="ml-1">超级管理员<i class="mdi mdi-chevron-down"></i> </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                <div class="dropdown-item noti-title">
                                    <h6 class="text-overflow m-0">欢迎使用</h6>
                                </div>

                                <a href="javascript:void(0);" class="dropdown-item notify-item"
                                    onclick="window_change('我的信息','message.html')">
                                    <i class="fi-head"></i> <span>我的信息</span>
                                </a>

                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-lock"></i> <span>锁屏</span>
                                </a>

                                <a href="javascript:void(0);" class="dropdown-item notify-item logout">
                                    <i class="fi-power"></i> <span>退出</span>
                                </a>

                            </div>
                        </li>

                    </ul>
                    <!-- 导航  -->
                    <ul class="list-inline menu-left mb-0">
                        <li>
                            <div class="page-title-box">
                                <h1 style="text-align: center;">脚标机实时监控系统 </h1>
                            </div>
                        </li>
                    </ul>

                </nav>

            </div>
            <!-- 头顶标签结束 -->

            <!-- Start Page content -->
            <div class="content">

                <div id="main">
                    <div id="showBarcodeMachine">
                    </div>
                </div>
            </div>
            <!-- content -->

            <!-- <footer class="footer">

            </footer> -->

        </div>

        <!-- ============================================================== -->
        <!-- End Right content here -->
        <!-- ============================================================== -->
    </div>

    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- <script src="assets/js/navigate.js"></script> -->
    <!-- <script>
        var roleName = getCookie("roleName")
        createNavigate(roleName)
    </script> -->
    <script src="assets/js/metisMenu.min.js"></script>
    <script src="assets/js/waves.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>


    <!-- KNOB JS -->

    <script type="text/javascript" src="plugins/jquery-knob/excanvas.js"></script>

    <script src="plugins/jquery-knob/jquery.knob.js"></script>
    <!-- layer插件 -->
    <script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>

    <!-- Dashboard Init -->
    <script src="plugins/echarts/echarts.min.js"></script>
    <script src="plugins/echarts/macarons.js"></script>


    <!-- App js -->
    <script src="assets/js/jquery.core.js"></script>
    <script src="assets/js/jquery.app.js"></script>
    <!-- datatables插件 -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="plugins/datatables/dataTables.responsive.min.js"></script>
    <script src="plugins/datatables/responsive.bootstrap4.min.js"></script>
    <script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>

    <script>



        var houseId = getCookie("houseId");
        if (!houseId) {
            layer.msg("请先登录");
            setTimeout(function () {
                window.location.href = "stallsLogin.html"
            }, 1000);
        }
        //获得屠宰场信息(名字)
        $.ajax({
            type: "GET",
            url: 'http://8.129.53.188:9091/slaughterHouse/id?id=' + houseId,
            async: false,
            dataType: "json",
            success: function (data) {
                var houseName = data.object.name;
                $('#slaughterHouseName').html(houseName);
            },
            error: function (data) {
                // alert("屠宰场信息请求失败！");
            }
        });
        //获得所有设备信息
        $.ajax({
            type: "GET",
            url: 'http://8.129.53.188:9201/monitor/queryBarcodeMachine/' + houseId,
            async: false,
            dataType: "json",
            success: function (data) {
                var tempLi = '';
                for (let i = 0; i < data.data.length; i++) {
                    tempLi += `<li class="machineName" style="cursor:pointer;"><a>` + data.data[i] + `</a></li>`;
                }
                $('#machineNum').html(tempLi);
                $(".machineName").each(function (index, element) {
                    $(this).attr('id', data.data[index])
                });
                detailMessage(data.data[0]);
                var timer = setInterval(function () {
                    detailMessage(data.data[0])
                }, 5000)
                $(".machineName").each(function (index, element) {
                    $(this).click(function () {
                        //关掉原来的定时器
                        clearInterval(timer);
                        let idNumber = $(this).attr('id');
                        detailMessage(idNumber)
                        //打开对应的定时器
                        timer = setInterval(function () {
                            detailMessage(idNumber)
                        }, 5000)
                    })
                })
            },
            error: function (data) {
                // alert("设备信息请求失败！");
            }
        });


        //展示每个脚标机信息
        function detailMessage(id) {
            $.ajax({
                type: "GET",
                url: 'http://8.129.53.188:9201/monitor/' + id,
                async: false,
                dataType: "json",
                success: function (data) {
                    var machineDate = '';
                    for (let i = 0; i < data.data.length; i++) {
                        machineDate += `<span style="float:left;">` + data.data[i].order + `</span><span style="float:right;">` + data.data[i].date + `</span><br />`
                    }
                    var finalDiv = `<ul>` + machineDate + `</ul>`;
                    $('#showBarcodeMachine').html(finalDiv);
                },
                error: function (data) {
                    // alert("请求失败！");
                }
            });
        }

        //退出等操作
        function logout(username) {
            $.ajax({
                type: "POST",
                url: URL + 'logout',
                async: false,
                data: {
                    "username": username
                },
                success: function (data) {
                    var remember = getCookie("remember")
                    if (remember != 1) {
                        delCookie("loginUsername")
                        delCookie("loginPassWord")
                    }
                    delCookie("userid")
                    delCookie("roleName")
                    delCookie("houseId")
                    sessionStorage.removeItem('pname')
                    layer.msg("退出成功");
                    setTimeout(function () {
                        window.location.href = "stallsLogin.html"
                    }, 1000);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    networkError(XMLHttpRequest, textStatus, errorThrown)
                }
            });
        }
        //点击退出
        function tabLogout(username) {
            $('.logout').click(function () {
                logout(username)
            })
        }
    </script>
</body>

</html>